import React from 'react';
import { DragSource } from 'react-dnd';
import { deepCopy } from 'share/common';
import { getEmptyImage } from 'react-dnd-html5-backend';

import { iconMap } from 'containers/data-center/report-management/custom-report/custom-report.modal';

/**
 * 从然哥18年写的 react-dnd copy过来的
 *
 * 页面左侧图标可拖拽组件块
 */
class DragItem extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    //链接拖拽的预览图片，用官方api给定一个空图片
    this.props.connectDragPreview(getEmptyImage(), {
      captureDraggingState: true,
    });
  }

  render() {
    const { widget } = this.props;
    const { isDragging, connectDragSource } = this.props;
    return connectDragSource(
      <div className={'menu-item-content'} onClick={() => {
        this.props.onItemClick(widget);
      }} draggable={true}>
        <div className="img-wrapper">
          <img className="img" src={iconMap[widget.key]} alt={widget.chartName}/>
        </div>
        <div className={'menu-title'}>{widget.chartName}</div>
      </div>
    );
  }
}

DragItem.propTypes = {
  widget: React.PropTypes.object,
  connectDragSource: React.PropTypes.func.isRequired,  //自动注入
  connectDragPreview: React.PropTypes.func.isRequired,  //自动注入
  isDragging: React.PropTypes.bool.isRequired
};

export default DragSource(
  'graph-item',
  {
    beginDrag(props) {
      return deepCopy(props.widget);
    },
  },
  (connect, monitor) => ({
    connectDragSource: connect.dragSource(),
    connectDragPreview: connect.dragPreview(),
    isDragging: monitor.isDragging(),
  }))(DragItem);
